<template>
	<view class="">
		<view class="search-top flex">
			<view class="position-city">
				<image src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/34.png"></image>
				<text class="fs-24 fc-33 pad-left-10">{{addressInfo.city}}</text>
			</view>
			<view class="days-box pad-left-15" @tap="showCaledar = !showCaledar">
				<view class="fc-33 fs-24 pad-top-10">住
					<text class="fc-33 fs-24 pad-left-5">03月04日</text>
				</view>
				<view class="fc-33 fs-24">离
					<text class="fc-33 fs-24 pad-left-5">03月04日</text>
				</view>
			</view>
			<calendar @change="change2" :modal="true" :show="showCaledar"></calendar>
			<input type="text" placeholder="输入关键词/品牌" />
		</view>
		<view class="b-line screen-box">
			 <HM-filterDropdown :filterData="filterData" :defaultSelected ="filterDropdownValue" @confirm="confirm"></HM-filterDropdown>
		</view>
		<view class="screen-content">
			<view class="s-c-item flex" v-for="(item,index) in hotelData" :key="index" @click="toHomepage(2,item.hotelSubId)">				
				<view class="s-c-img">
					<view class="t-j">1</view>
					<view class="pin-j">{{item.hotelSubStar}}星</view>					
					<image :src="item.hotelImgPath[0]"></image>
				</view>
				<view class="flex-1 grade-content">
					<view class="flex">
						<text class="fs-28 fc-33 flex-1">{{item.hotelSubName}}</text>
						<!-- <text class="fc-ec">剩余{{item.freeRoomCount}}间房</text> -->
					</view>
					<view class="starts">
						<view class="stars" v-if="item.hotelSubStar == 1">
							<image src="https://web.suqzp.com/public/static/xinx.png"></image>
						</view>
						<view class="stars" v-if="item.hotelSubStar == 2">
							<image src="https://web.suqzp.com/public/static/xinx.png"></image>
							<image src="https://web.suqzp.com/public/static/xinx.png"></image>
						</view>
						<view class="stars" v-if="item.hotelSubStar == 3">
							<image src="https://web.suqzp.com/public/static/xinx.png"></image>
							<image src="https://web.suqzp.com/public/static/xinx.png"></image>
							<image src="https://web.suqzp.com/public/static/xinx.png"></image>
						</view>
						<view class="stars" v-if="item.hotelSubStar == 4">
							<image src="https://web.suqzp.com/public/static/xinx.png"></image>
							<image src="https://web.suqzp.com/public/static/xinx.png"></image>
							<image src="https://web.suqzp.com/public/static/xinx.png"></image>
							<image src="https://web.suqzp.com/public./static/xinx.png"></image>
						</view>
						<view class="stars" v-if="item.hotelSubStar == 5">
							<image src="https://web.suqzp.com/public/static/xinx.png"></image>
							<image src="https://web.suqzp.com/public/static/xinx.png"></image>
							<image src="https://web.suqzp.com/public/static/xinx.png"></image>
							<image src="https://web.suqzp.com/public./static/xinx.png"></image>
							<image src="https://web.suqzp.com/public/static/xinx.png"></image>
						</view>
					</view>
					<view class="pression flex">
						<text class="fs-26 fc-84">{{item.hotelAvgScore}}分</text>
						<text class="fs-26 fc-33">{{item.hotelComment || 0}}条评论</text>
						<text class="fs-26 fc-33">{{item.hotelCollectNo}}人收藏</text>
					</view>
					<view class="flex tags-wap">
						<view class="tags fs-24 one-ellipsis" >{{item.hotelSubPolicy}}</view>
					</view>
					<view class="flex">
						<view class="fs-24 flex-1">{{item.hotelSubProvince}}{{item.hotelSubCity}}{{item.hotelSubArea}}</view>
						<view class="prices">
							<!-- <text class="yx fc-99 fs-24">￥{{item.price || 0}}</text>
							<text class="fc-ec fs-36"><text class="fs-24">￥</text>{{item.promotionPrice || 0}}</text> -->
							<text class="fc-ec fs-36"><text class="fs-24">￥</text>0</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 引入腾讯地图jssdk文件
	import  QQMapWX from "@/static/js/qqmap-wx-jssdk.min.js"
	import {mapState,mapGetters} from 'vuex';//位置授权
	export default {
		computed: {
			...mapState(["addressInfo"]),
			...mapGetters(['isLocation'])
		},
		data() {
			return {
				showCaledar: false,
				type:'',//类型
				startTime:'',//开始时间
				endTime:'',//结束时间
				dayCount:'',//住宿时间
				weekstart:'',//周几开始
				weekend:'',//周几结束
				hotelData:[],
				indexArr:[],//
				valueArr:[],
				filterData: [{
						"name": '智能排序',
						"type": 'hierarchy',
						"submenu": [{
								"name": "智能排序",
								"value": "智能排序"
							},
							{
								"name": "离我最近",
								"value": "离我最近"
							},
						]
					}, {
						name: '区域位置',
						"type": 'hierarchy',
						"submenu": [{
								"name": '附近',
								"value": "附近",
								"submenu": [
				
								]
							},
							{
								"name": '热门商圈',
								"value": "热门商圈",
								"submenu": [{
										"name": "全部商圈",
										"value": "全部商圈"
									},
									{
										"name": "万达广场",
										"value": "万达广场"
									}
								]
							}
						]
					},
					{
						name: '价格/星级',
						"type": 'radio',
						"submenu": [{
								"name": "价格",
								"submenu": [{
									"name": "150元以下",
									"value": "150以下"
								},{
									"name": "150-300元以下",
									"value": "150-300元以下"
								},{
									"name": "300-450元以下",
									"value": "300-450元以下"
								},{
									"name": "450-600元以下",
									"value": "450-600元以下"
								},{
									"name": "600-1000元以下",
									"value": "600-1000元以下"
								},{
									"name": "1000元以上",
									"value": "1000元以上"
								}]
							}, {
								"name": "星级",
								"submenu": [{
										"name": "二星",
										"value": "二星"
									},{
										"name": "三星",
										"value": "三星"
									},{
										"name": "四星",
										"value": "四星"
									},{
										"name": "五星",
										"value": "五星"
									},				
								]
							}				
						]
					},
					{
						name: '筛选',
						"type": 'radio',
						"submenu": [{
								"name": "优惠促销",
								"submenu": [{
									"name": "不限",
									"value": "不限"
								},{
									"name": "首住优惠",
									"value": "首住优惠"
								},{
									"name": "天天特惠",
									"value": "天天特惠"
								}]
							},
							{
							"name": "酒店品牌",
							"submenu": [{
								"name": "不限",
								"value": "不限"
							},{
								"name": "7天",
								"value": "天"
							},{
								"name": "贝克酒店",
								"value": "贝克酒店"
							}]
						}
						]
					},
				],
			};
		},
		onLoad(option) {
			this.startTime = option.startTime//开始时间
			this.endTime = option.endTime//结束时间
			this.dayCount= option.dayCount//住宿时间
			this.weekstart = option.weekstart
			this.weekend = option.weekend
			this.$store.dispatch('getCity')//获取当前位置
			this.type = option.type
			this.searchObj = JSON.parse(decodeURIComponent(option.searchObj))
		},
		mounted() {
			// setTimeout(()=>{
			// 	this.filterData[1].submenu[0].submenu = [
			// 		{"name": "附近","value": "附近"},
			// 		{"name": "1km","value": "1km"},
			// 		{"name": "2km","value": "2km"},
			// 		{"name": "3km","value": "3km"},
			// 		{"name": "4km","value": "4km"},
			// 		{"name": "5km","value": "5km"},
			// 	];
			// },1000)
			this.getHotelSubList()
		},
		methods: {
			//获取酒店列表
			async getHotelSubList() {
				let param = {
					pageNum: 1,
					pageSize: 100,
					status: 0,
					hotelSubStar: this.searchObj && this.searchObj.hotelSubStar || '',
					keyWord: this.searchObj && this.searchObj.keyWord || '',
					minPrice: this.searchObj && this.searchObj.minPrice || '',
					maxPrice: this.searchObj && this.searchObj.maxPrice || '',
					paramDis: this.searchObj && this.searchObj.paramDis || '',
					paramLongitude: this.searchObj && this.searchObj.paramLongitude || '',
					paramLatitude: this.searchObj && this.searchObj.paramLatitude || '',
					hotelSubArea: this.searchObj && this.searchObj.hotelSubArea || '',
					withRecent: this.searchObj && this.searchObj.withRecent || '',
					withSmart: this.searchObj && this.searchObj.withSmart || '',
					withAuth: 1
				};
				let res = await this.$apis.getHotelSubList(param);
				if (res) {
					for(var i=0;i<res.rows.length;i++){
						res.rows[i].hotelImgPath= res.rows[i].hotelImgPath.split(",");//逗号是分隔符
					}
					// 将htoel_room_name为空的过滤掉，表示这个酒店没有房间或者找不到有人才认证的房间
					this.hotelData=res.rows.filter((r) => {
						if(r.hotelRoomName) {
							return r;
						}
					})
				}
				uni.hideLoading();
			},
			//获取筛选结果
			confirm(e){
				console.log(e.value)
				this.indexArr = e.index;
				this.valueArr = e.value;				
			},
			//时间选择
			 change({ choiceDate, dayCount }) {				
				//参数解释//1.choiceDate 时间区间（开始时间和结束时间）//2.dayCount 共多少晚
				this.startTime = choiceDate[0].re
				this.endTime = choiceDate[1].re
				this.dayCount = dayCount
			},
			change2({ choiceDate, dayCount }) {
				this.dateStr = '入住从 ' + choiceDate[0].re + ' (星期' + choiceDate[0].week + ')  到 ' + choiceDate[1].re + '(星期' + choiceDate[1].week + ')' + '  共 ' + dayCount + ' 晚 ';
			},
			//去主页
			toHomepage(type,id){
				uni.navigateTo({
					url:'/pages/hotel/hotel-homepage?hotelSubId='+id+'&startTime='+this.startTime+"&endTime=" + this.endTime+"&dayCount=" + this.dayCount+"&weekstart=" + this.weekstart+"&weekend=" + this.weekend+'&type='+type
				})
			},
			//图片配置域名
			getImgUrl(icon){
			   return "https://huangwenxing.imdo.co/sqzp-dev-api"+icon;
			},
		}
	}
</script>
<style lang="scss">
	.search-top{
		width: 92%;		
		margin: 28rpx auto;
		background: #F7F9F9;
		height: 80rpx;
		border-radius: 90rpx;
		.position-city{
			line-height: 80rpx;
			padding-left: 26rpx;
			image{
				width:26rpx;
				height:32rpx;
				display: inline-block;
				position: relative;
				top: 6rpx;
			}
		}
		.days-box{
			padding-right: 10rpx;
		}
		input{
			display: block;
			line-height: 80rpx;
			height: 80rpx;
			width: 360rpx;
			padding-left: 10rpx;
			border-left: 2rpx solid #fff;
			font-size: 24rpx;
			color: #666;
		}
	}
	.screen-box{
		height: auto;
		position: sticky;
		top: 0;
		z-index: 2;
	}
	.screen-content{
		width: 92%;
		padding:0 4%;	
		margin-top: 24rpx;
		.s-c-item{
			border-bottom: 1px solid #f6f6f6;
			padding: 30rpx 0;
			.s-c-img{
				width:168rpx;
				height:218rpx;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				overflow: hidden;
				position: relative;
				image{
					width: 100%;
				}
				.t-j{
					position: absolute;
					top: 0;
					right: 0;
					width:35rpx;
					height: 30rpx;
					background: #0000006b;
					line-height: 30rpx;
					text-align: center;
					font-size: 24rpx;
					color: #fff;
				}
				.pin-j{
					position: absolute;
					bottom: 0;
					left: 0;
					width:74rpx;
					height: 44rpx;
					background: #0000006b;
					border-radius: 0px 0px 0px 12rpx;
					font-size: 24rpx;
					color: #F9E75D;
					line-height: 44rpx;
					text-align: center;
				}
			}
			.grade-content{
				margin-left: 20rpx;
				.fc-ec{
					color: #EC7571;
				}
				.stars{
					margin: 10rpx 0;
					image{
						width: 30rpx;
						height: 28rpx;
						display: inline-block;
						margin: 0 5rpx;
					}
				}
				.pression{
					margin: 10rpx 0;
					text{
						padding-right: 35rpx;
					}
				}
				.tags-wap{
					margin: 15rpx 0;
				}
				.tags{
					width: 118rpx;
					height:36rpx;
					background: #F0F8FE;
					margin-right: 26rpx;
					text-align: center;
					line-height: 36rpx;
					color: #5C9DD6;
				}
				.prices{
					.yx{
						text-decoration: line-through;
					}					
				}
			}
		}
	}
</style>
